import React, { Component } from "react";
import "./index.less";
//引入video.js 库和样式
import videojs from "video.js";
import "video.js/dist/video-js.css";
// 引入 videojs-contrib-hls 库,可以播放m3u8文件
import "videojs-contrib-hls";

export default class Video extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        //h5 for hls
        html5: {
          hls: {
            withCredentials: true
          }
        },
        //flash for hls
        flash: {
          hls: {
            withCredentials: true
          }
        },
        playbackRates: [1, 1.5, 2], //设置倍速播放按钮
        // fluid: true, //宽高自适应
      }
    };
  }

  componentWillMount(){

  }
  componentDidMount() {
    //初始化播放器
    const player = videojs("my-player", this.state.options, () => {
      
      //监听视频加载完可以播放时
      player.on("canplay", () => { 
        document.querySelector(
          ".vjs-remaining-time"
        ).innerHTML = `${this.transTime(player.currentTime())}`;
        console.log("视频总时间 :" + player.duration()); //播放视频时候获取总长度
        //加载完保存player
        this.setState({
            player
        })
      });

      //监听视频结束时
      player.on("ended", () => {
        console.log("播放结束"); //视频结束
      });

      //监听点击播放时
      player.on("play", () => {
        console.log("开始播放"); //开始播放
      });

      //监听时间轴改变
      player.on("timeupdate", () => {
        const currentTime = parseInt(player.currentTime());
        console.log("当前时间 :" + currentTime); //监听timeupdate时间轴,获取当前播放时间
        const buffertime = parseInt(player.bufferedPercent() * 100);
        console.log("缓存 :" + buffertime + "%"); //缓存
        //设置播放器总时间
        document.querySelector(
          ".vjs-remaining-time"
        ).innerHTML = `${this.transTime(player.currentTime())}`;
      });
    });
  }

  //播放
  paly = () => {
    this.state.player.play();
    
  };
  //暂停
  pause = () => {
    this.state.player.pause();
    const speed = this.state.player.playbackRate(10);
  };

  //播放第100秒
  currentTime = () => {
    this.state.player.currentTime(100);
  };
  //重载
  load = () => {
    this.state.player.load();
  };

  //1倍速度播放
  speed1 = () => {
    this.state.player.playbackRate(1);
  };

  //2倍速度播放
  speed2 = () => {
    this.state.player.playbackRate(2);
  };

  //转换音频时长显示
  transTime = time => {
    let duration = parseInt(time);
    let minute = parseInt(duration / 60);
    let sec = (duration % 60) + "";
    let isM0 = ":";
    if (minute == 0) {
      minute = "00";
    } else if (minute < 10) {
      minute = "0" + minute;
    }
    if (sec.length == 1) {
      sec = "0" + sec;
    }
    return minute + isM0 + sec;
  };

  render() {
    return (
      <div>
        <video
          id="my-player"
          className="video-js vjs-big-play-centered "
          // className="video-js vjs-big-play-centered"
          
          controls //控制条
          preload="auto" //预加载
          // poster="//vjs.zencdn.net/v/oceans.png" //展示图片
          // data-setup="{}" //自动初始化,这里写了初始化的时候就不用写了
          width="800"
          height="500"
        >
          <source src={require("./../../video/demo.mp4")} type="video/mp4" />
          {/* <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> */}
          {/* <source src={require("./110.mp3")} type="audio/mpeg"/> */}
          {/* <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> */}
          {/* <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> */}
          {/* <source src="http://tv.unbtv.tv/app_2/ls_1.stream/playlist.m3u8" type="application/x-mpegURL" /> */}
          <p className="vjs-no-js">请使用谷歌/火狐浏览器</p>
        </video>
        <br />
        {/* <button onClick={this.paly}>开始</button> */}
        {/* <button onClick={this.pause}>暂停</button> */}
        <button onClick={this.currentTime}>第100秒</button>
        {/* <button onClick={this.speed1}>x1</button> */}
        {/* <button onClick={this.speed2}>x2</button> */}
        <button onClick={this.load}>重置</button>
      </div>
    );
  }
}
